<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path5 = request.getContextPath();
    String basePath5 = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path5 + "/";
%>
<%--车辆--%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
    <title>Insert title here</title>
    <style type="text/css">
        li span {
            margin-left: 0px;
            cursor: pointer;
        }

        li span:hover {
            color: #427dff
        }

        /**按钮样式**/
        .subtn1 {
            background: #57a0ff;
            border-radius: 50px;
            background: -webkit-linear-gradient(top, #57a0ff, #57a1ff);
            background: -moz-linear-gradient(top, #57a0ff, #57a1ff);
            background: linear-gradient(top, #57a0ff, #57a1ff);
            background: -ms-linear-gradient(top, #57a0ff, #57a1ff);
            border: 1px solid #2576A8;
            box-shadow: 0 1px 2px #8AC1E2 inset, 0 -1px 0 #57a0ff inset;
            color: #fff;
            height: 40px;
            text-shadow: 1px 1px 0.5px #22629B;
            outline: none;
        }

        .btn {
            background: #57a0ff, background;
            border-radius: 50px;
            background: -webkit-linear-gradient(top, #57a0ff, #57a1ff);
            background: -moz-linear-gradient(top, #57a0ff, #57a1ff);
            background: linear-gradient(top, #57a0ff, #57a1ff);
            background: -ms-linear-gradient(top, #57a0ff, #57a1ff);
            border: 1px solid #2576A8;
            box-shadow: 0 1px 2px #8AC1E2 inset, 0 -1px 0 #57a0ff inset;
            color: #fff;
            height: 40px;
            text-shadow: 1px 1px 0.5px #22629B;
            outline: none;
        }

        .subtn1:hover {
            background: -webkit-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -moz-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -ms-linear-gradient(top, #8DC9EF, #4E9FD1);
        }

        .btn:hover {
            background: -webkit-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -moz-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -ms-linear-gradient(top, #8DC9EF, #4E9FD1);
        }

        .modal-data5 {
            visibility: hidden;
            z-index: 1001;
            width: 1000px;
            min-height: 500px;
            margin: 100px auto;
            background-color: #FFFFFF;
            /* border: 1px solid #C80B14;*/
            -moz-box-shadow: 0 10px 20px #8AC1E2 inset, 0 -10px 0 #57a0ff inset;
            -webkit-box-shadow: 0 10px 20px #8AC1E2 inset, 0 -10px 0 #57a0ff inset;
            /*         box-shadow:0 0 10px #cccccc;
                    box-shadow: #cccccc; */
            box-shadow: 0 10px 20px #57a1ff inset, 0 -10px 0 #57a0ff inset;
            padding: 5px;
            text-align: center;
            position: fixed;
            left: 22%;
        }

        .modal-data5 td {
            padding-left: 15px;
            padding-right: 15px
        }

        .modal-data5 tr:FIRST-CHILD td {
            padding: 0px 10px;
        }

        .modal-data5 tr {
            padding-top: 30px
        }

        .modal-data5 form table {
            margin: 0px
        }

        input[type=checkbox] {
            padding: 0px;
            margin: 0px;
            text-align: right;
            width: 15px
        }

        .div_zilei {
            width: 600px;
            padding-left: 90px;
            height: 30px
        }

        .tr {
            height: 40px;
            background: #a9bbe0
        }

        .tr td {
            font-size: 14px;
            color: #ffffff
        }

        .tr_td {
            height: 40px;
        }

        .tr_td td {
            border-bottom: 1px solid #ededed;
            text-align: center;
        }

        tr td:nth-child(1) {
            font-size: 14px;
            color: #cccccc
        }

        .date {
            border: 0;
            background: #ffffff;
            text-align: center;
        }

        .tr_td td:nth-child(1) {
            border-left: 1px solid #cccccc;
        }

        .addTable.deleteTable:HOVER {
            cursor: pointer;
        }

        .fseq {
            width: 37px;
            border: 0;
            text-align: center;
            color: #cccccc
        }

        .jczl {
            padding-left: 100px;
        }

        .div_tj {
            margin-top: 40px;
            padding-right: 60px;
        }

        .text {
            border: 0;
            background: #ffffff;
            text-align: center;
        }

        .remuneration1 {
            width: 150px;
            border: 0;
            background: #ffffff;
            text-align: center;
        }

        .loading {
            margin: 100px 450px;
            display: block;
            width: 65px;
            height: 65px;
            border: 1px solid #ddd;
            border-radius: 5px;
            opacity: .7;
            background: url(../images/loading.gif) no-repeat;
        }

        .botton {
            float: left;
            margin-left: 80px;

        }

        .botton input {
            width: 100px;
        }

        .botton span {
            width: 80px;
        }

        span input {
            width: 120px;
        }

        .findBtn1 {
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div id="modal-overlay">

</div>
<div class="modal-data5">
    <div style="height: 60px">
        <ul>
            <li style="text-align: left;height: 40px;line-height: 40px">
                <span style="margin-left: 30px;">名称：</span>
                <span>
				  		 	<input class="name-data5" type="text">
				  		</span>
                <span>编码：</span>
                <span>
				  		 	<input class="fnumber-data5" type="text">
				  		</span>
                <span>
				  			<button id="findBtn5" class="findBtn1">
				  				查询
				  			</button>
				  		</span>
            </li>
        </ul>
    </div>

    <div style="width:100%; height:350px; overflow:scroll;">
        <form action="">
            <table class="head2" id="carList" style="width: auto;white-space:nowrap;border-spacing: 0px">
                <tr style="background: #f2f2f2;height: 30px;line-height: 20px;" class="sel">
                    <td style="width: 20px"></td>
                    <td>名称</td>
                    <td>编码</td>
                    <td>简称</td>
                    <td>描述</td>
                    <td>创建时间</td>
                    <td>用户名</td>
                    <td>最后修改时间</td>
                    <td>用户名</td>
                    <td>财务组织</td>
                    <td>入户日期</td>
                    <td>车架号</td>
                    <td>发动机号</td>
                    <td>年检到期日</td>
                    <td>交强险到期日</td>
                    <td>商业险到期日</td>
                    <td>二级维护到期日</td>
                    <td>综检到期日</td>
                    <td>保养到期日</td>
                    <td>科目三通行证到期日</td>
                    <td>所属机构</td>
                    <td>产地</td>
                    <td>品牌</td>
                    <td>保单号</td>
                    <td>商业险日期</td>
                    <td>交强险日期</td>
                    <td>年检日期</td>
                    <td>二级维护日期</td>
                    <td>综检险日期</td>
                    <td>保养日期</td>
                    <td>科目三通行证日期</td>
                    <td>购买价格</td>
                    <td>购买日期</td>
                    <td>理论油耗</td>
                </tr>
                <c:forEach items="${cars}" var="cars">
                    <tr style="margin-top: 45px" class="xysj">
                        <td style="width: 20px"><input type="checkbox"
                                                       value="${cars.fid}" name="train" style="width: 15px"/></td>
                        <td>${cars.fnameL2}</td>
                        <td>${cars.fnumber}</td>
                        <td>${cars.fsimplename}</td>
                        <td>${cars.fdescriptionL2}</td>
                        <td>${cars.fcreatetime}</td>
                        <td>${cars.createName}</td>
                        <td>${cars.flastupdatetime}</td>
                        <td>${cars.updateName}</td>
                        <td>${cars.companyName}</td>
                        <td>${cars.cfrhrq}</td>
                        <td>${cars.cfcjh}</td>
                        <td>${cars.cffdjh}</td>
                        <td>${cars.cfnjdqr}</td>
                        <td>${cars.cfjqxdqr}</td>
                        <td>${cars.cfsyxdqr}</td>
                        <td>${cars.cfejwhdqr}</td>
                        <td>${cars.cfzjdqr}</td>
                        <td>${cars.cfbydqr}</td>
                        <td>${cars.cfkmstxzdqr}</td>
                        <td>${cars.deptName}</td>
                        <td>${cars.cfcd}</td>
                        <td>${cars.cfpp}</td>
                        <td>${cars.cfbdh}</td>
                        <td>${cars.cfsyxrq}</td>
                        <td>${cars.cfjqxrq}</td>
                        <td>${cars.cfnjrq}</td>
                        <td>${cars.cfejwhrq}</td>
                        <td>${cars.cfzjrq}</td>
                        <td>${cars.cfbyrq}</td>
                        <td>${cars.cfkmstxzrq}</td>
                        <td>${cars.cfgmjg}</td>
                        <td>${cars.cfgmrq}</td>
                        <td>${cars.cfllyh}</td>
                    </tr>
                </c:forEach>


            </table>

        </form>
    </div>

    <div class="page" style="display: none;">
        <ul style="border-bottom: none;">
            <li>
                <span class="indexPage">首页</span>
                <span class="prevPage">上一页</span>
                <span class="nextPage">下一页</span>
                <span class="endPage">尾页</span>
                <input type="hidden" id="totalPage" value="${pb}">
                <input type="hidden" id="index" value="1">
            </li>
        </ul>
    </div>

    <button class="subtn" id="subtn5" style="width: 150px;position: absolute;bottom: 35px;font-size: 16px;left: 250px">
        确定
    </button>
    <button class="btn" style="width: 150px;position: absolute;bottom: 35px;font-size: 16px;right: 250px">
        关闭
    </button>


</div>
</body>
<script type="text/javascript" src="<%=path5%>/JQuery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path5%>/HoganJS/handlebars-v4.0.11.js"></script>
<script id="table-template-car5" type="text/x-handlebars-template">
    {{#isNull this}}
    <tr style="background: #f2f2f2;height: 30px;line-height: 20px;" class="sel">
        <td style="width: 20px"></td>
        <td>名称</td>
        <td>编码</td>
        <td>简称</td>
        <td>描述</td>
        <td>创建时间</td>
        <td>用户名</td>
        <td>最后修改时间</td>
        <td>用户名</td>
        <td>财务组织</td>
        <td>入户日期</td>
        <td>车架号</td>
        <td>发动机号</td>
        <td>年检到期日</td>
        <td>交强险到期日</td>
        <td>商业险到期日</td>
        <td>二级维护到期日</td>
        <td>综检到期日</td>
        <td>保养到期日</td>
        <td>科目三通行证到期日</td>
        <td>所属机构</td>
        <td>产地</td>
        <td>品牌</td>
        <td>保单号</td>
        <td>商业险日期</td>
        <td>交强险日期</td>
        <td>年检日期</td>
        <td>二级维护日期</td>
        <td>综检险日期</td>
        <td>保养日期</td>
        <td>科目三通行证日期</td>
        <td>购买价格</td>
        <td>购买日期</td>
        <td>理论油耗</td>
    </tr>
    {{#each this}}
    <tr style="margin-top: 45px" class="xysj">
        <td style="width: 20px"><input type="checkbox"
                                       value="{{fid}}" name="train" style="width: 15px"/></td>
        <td>{{fnameL2}}</td>
        <td>{{fnumber}}</td>
        <td>{{fsimplename}}</td>
        <td>{{fdescriptionL2}}</td>
        <td>{{fcreatetime}}</td>
        <td>{{createName}}</td>
        <td>{{flastupdatetime}}</td>
        <td>{{updateName}}</td>
        <td>{{companyName}}</td>
        <td>{{cfrhrq}}</td>
        <td>{{cfcjh}}</td>
        <td>{{cffdjh}}</td>
        <td>{{cfnjdqr}}</td>
        <td>{{cfjqxdqr}}</td>
        <td>{{cfsyxdqr}}</td>
        <td>{{cfejwhdqr}}</td>
        <td>{{cfzjdqr}}</td>
        <td>{{cfbydqr}}</td>
        <td>{{cfkmstxzdqr}}</td>
        <td>{{deptName}}</td>
        <td>{{cfcd}}</td>
        <td>{{cfpp}}</td>
        <td>{{cfbdh}}</td>
        <td>{{cfsyxrq}}</td>
        <td>{{cfjqxrq}}</td>
        <td>{{cfnjrq}}</td>
        <td>{{cfejwhrq}}</td>
        <td>{{cfzjrq}}</td>
        <td>{{cfbyrq}}</td>
        <td>{{cfkmstxzrq}}</td>
        <td>{{cfgmjg}}</td>
        <td>{{cfgmrq}}</td>
        <td>{{cfllyh}}</td>
    </tr>
    {{/each}}

    {{else}}
    <td>没有搜索到您想要的内容!</td>
    {{/isNull}}

</script>
<script>

    var myTemplatcar5 = Handlebars.compile($("#table-template-car5").html());
    //注册一个比较内容是否为空
    Handlebars.registerHelper("isNull", function (v1, options) {
        if (v1 != "") {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    //注册一个比较大小的Helper,判断v1是否大于v2
    Handlebars.registerHelper("compare", function (v1, v2, options) {
        if (v2 == 100) {
            //满足添加继续执行
            return options.fn(this);
        }
        if (v1 == v2) {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });
    //点击查找按钮
    $('#findBtn5').click(function () {
        var index = 0;
        $('#cartimeList').html("<div class='loading'></div>");
        $.ajax({
            url: '<%=path5%>/DrivingSys/queryCarByInfo ',
            type: "post",
            data: {
                'pindex': '0',
                'name': $('.name-data5').val(),
                'fnumber': $('.fnumber-data5').val()
            },
            dataType: "json",
            success: function (res) {
                $('#carList').html(myTemplatcar5(res));
            },
            error: function () {
                alert('Error');
            }
        });

    })

    //单击选中
    $(document).on('click', '#carList tr td', function () {
        $('input:checkbox:first-child:checked').each(function (i) {
            $(this).removeAttr("checked");
        });
        if ($(this).parent().find("input:checkbox").is(':checked')) {
            $(this).parent().find("input:checkbox").removeAttr("checked");
        } else {
            $(this).parent().find("input:checkbox").attr("checked", ":checked")
        }
    })
    //双击
    $(document).on('dblclick', '#carList tr td:not(td:first-child)', function () {
        $(this).parent().find("input:checkbox").attr("checked", ":checked")
        $('#subtn5').click();
    })


</script>
</html>